﻿@model MvcDatagrid.Models.Images
@{
    <div class="img-display" id="pictureID_@Model.Id" data-bind="event: { mouseover: hoverPicture, mouseout: hoverPicture }, css: { 'img-display-focus': selected, 'img-display-onfront': EditFields }">
	    <div class="edit-tools" data-bind="visible: selected">
		    <div class="edit-tool" data-bind="click: goEdit">
			    <img src="/Style/img/pen_edit.png" />
		    </div>
		    <div class="del-tool" data-bind="click: goDelete">
			    <img src="/Style/img/close_delete.png" />
		    </div>
	    </div>
	    <div class="img-container">
		    <img src="@Model.ImgPath" />
	    </div>
        <div class="img-details" data-bind="visible: selected">
            <span data-bind="text: OriginalTitle"></span>
		    <p id="pDesc">@Model.Description</p>
	    </div>
	    <div data-bind="visible:EditFields" class="img-details-modify">
		    <div>
			    @Html.LabelFor(model => model.Title)
                @Html.TextBoxFor(model => model.Title, new { data_bind = "value: Title" }) 
			    <span>Description</span>
			    <textarea rows="2" value="@Model.Description"></textarea>
		    </div>
		    <div class="edit-del-butt">
			    <div class="edit-del-ok" data-bind="click: updatePictureInformation">
				    <input type="submit" id="btnModify" class="postback-button" value="Save" />
			    </div>
			    <div class="edit-del-cancel" data-bind="click: cancelEdit">
				    <input type="submit" id="btnCancelEdition" value="Cancel" onclick="return false;" />
			    </div>
		    </div>
	    </div>
        <div class="loading" data-bind="visible: LoadingData">
		    <div>
			    <span>Updating...</span>
		    </div>
		    <div>
			    <img src="/Style/img/ajax-loader.gif" alt="" />
		    </div>
	    </div>
        <div class="del-confirm" data-bind="visible: DeleteData">
		    <div class="del-warn">
			    <div>
				    <img src="/Style/img/warn-delete.png" />
			    </div>
			    <div>
				    <span>Do you want to delete this picture?</span>
			    </div>
		    </div>
		    <div class="edit-del-butt">
			    <div class="edit-del-ok" data-bind="click: deletePicture">
				    <input type="submit" value="Delete" />
			    </div>
			    <div class="edit-del-cancel" data-bind="click: cancelDelete">
				    <input type="button" value="Cancel" onclick="return false;" />
			    </div>
		    </div>
	    </div>
	    <div class="del-background" data-bind="visible: DeleteData">
	</div>
        @Html.HiddenFor(m => m.Id, new Dictionary<string, object>{{ "data-bind", "value: ID" }})
        @Html.HiddenFor(m => m.Title, new Dictionary<string, object> { { "data-bind", "value: OriginalTitle" } })
    </div>
    <script type="text/javascript">
        function PictureInformation() {
            this.pictureID;
            this.pictureTitle;
        }
        function viewModel(){
            this.EditFields = ko.observable(false);
            this.ReadOnlyMode = ko.observable(true);
            this.LoadingData = ko.observable(false);
            this.DeleteData = ko.observable(false);
            this.Title = ko.observable("@Model.Title");
            this.OriginalTitle = ko.observable("@Model.Title");
            this.ID = ko.observable("@Model.Id");
            this.selected = ko.observable(false);
            this.hoverPicture = function () {
                if (readyToUpdate == 0) {
                    this.selected(!this.selected());
                }
            };

            this.goEdit = function () {
                if (readyToUpdate == 0) {
                    readyToUpdate = 1;
                    this.EditFields(true);
                    this.ReadOnlyMode(false);
                    $('.background-list').addClass('background-list-activated');
                }
            };
            this.cancelEdit = function () {
                readyToUpdate = 0;
                this.EditFields(false);
                this.ReadOnlyMode(true);
                $('.background-list').removeClass('background-list-activated');
            };

            this.goDelete = function (parents) {
                if (readyToUpdate == 0) {
                    readyToUpdate = 1;
                    this.DeleteData(true);
                }
            }

            this.cancelDelete = function () {
                readyToUpdate = 0;
                this.DeleteData(false);
            };

            this.deletePicture = function () {
                var pictureInfo = new PictureInformation();
                pictureInfo.pictureID = this.ID();
                $.ajax({
                    url: "/Pictures/DeleteImage",
                    type: "POST",
                    context: this,
                    data: pictureInfo,
                    success: function (result, textStatus) {
                        var status = result.status;
                        readyToUpdate = 0;
                        $("#pictureID_@Model.Id").toggle();
                        readyToUpdate = 0;
                        this.DeleteData(false);
                    }
                });
            }
            this.updatePictureInformation = function () {
                var pictureInfo = new PictureInformation();
                pictureInfo.pictureID = this.ID();
                pictureInfo.pictureTitle = this.Title();
                this.LoadingData(true);
                $.ajax({
                    url: "/Pictures/UpdatePictureInformation",
                    type: "POST",
                    context: this,
                    data: pictureInfo,
                    success: function(result, textStatus) {
                        var status = result.status;
                        this.Title(result.Title);
                        this.OriginalTitle(result.Title);
                        this.LoadingData(false);
                        this.ReadOnlyMode(true);
                        this.EditFields(false);
                        $('.background-list').removeClass('background-list-activated');
                        readyToUpdate = 0;
                    }
                });
            }
        }
        ko.applyBindings(new viewModel(), document.getElementById("pictureID_@Model.Id"));
    </script>
}